<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2022-12-13 11:03:33
-->
<template>
    <div class="topsonglist"
        :style="{ background: 'url(' + topList.coverImgUrl + ')', backgroundPosition: 'center center' }">
        <div class="left">
            <img :src="topList.coverImgUrl" alt="">
        </div>
        
        <div class="right">
            <div class="title">
                <div class="iconfont icon-huangguan"></div>
                <span>精品歌单</span>
            </div>
            <div class="name">{{ topList.name }}</div>
        </div>
    </div>
    
</template>

<script setup>

defineProps({
    topList: {
        type: Object,
        default: {}
    }
})
</script>

<style lang="scss" scoped>
.topsonglist {
    width: 100%;
    height: 170px;
    border-radius: 8px;
    position: relative;
    // backdrop-filter: blur(5px);

    .bgcImg {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transform: translateY(-80px);
        filter: blur(30px) brightness(70%);

    }

    .left {
        position: absolute;
        top: 15px;
        height: 140px;
        width: 140px;
        border-radius: 8px;
        margin: 0px 15px;
        z-index: 9999;

        img {
            height: 100%;
            width: 100%;
        }
    }

    .right {
        position: absolute;
        top: 40px;
        margin-left: 170px;

        .title {
            width: 100px;
            display: flex;
            padding: 5px 10px;
            color: #e7aa5a;
            border-radius: 20px;
            border: 1px solid #e7aa5a;
            margin-bottom: 20px;
            font-size: 13px;

            span {
                margin-left: 5px;
            }
        }

        .name {
            color: white;
            font-size: 15px;
        }
    }
}

.iconfont {
    font-size: 15px;
}

// .topsonglist::before {
//     content: '';
//     position: absolute;
//     top: 0;
//     left: 0;
//     width: 100%;
//     height: 170px;
//     filter: blur(5px);
// }
</style>